<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import type { ResourceItem, OptionTypeItem } from '@/types/home'
import { getResourceAPI, getPublishAPI } from '@/services/home'
import { baseURL_noapi } from '@/utils/http'

const resource_list = ref<ResourceItem[]>([])
const state = reactive({
  publish: '',
  grade: '',
  subject: '',
  type_cn: '',
  page: 1,
  size: 10,
  total: 0,
})
const publish = ref<string>('')
// 选择框列表
const dropdownListOption = ref<OptionTypeItem[]>([
  { text: '人教版', value: 'rjb', disable: false },
  { text: '北师大', value: 'bsd', disable: false },
  { text: '浙教版', value: 'zjb', disable: false },
])

onLoad((option: any) => {
  console.log('父组件页面加载', option)
  state.grade = option.grade
  state.subject = option.subject
  state.type_cn = option.type
  getPublishOption()
  getResource()
})
// 修改时间格式，取前面的年月
const shortTime = (time: string) => {
  return time.slice(0, 7)
}

// 用于上拉触底新增试题数据
const addRescourceData = async () => {
  let params = {
    publish: state.publish,
    subject: state.subject,
    grade: state.grade,
    type_cn: state.type_cn,
    page: state.page,
    size: state.size,
  }
  const res = await getResourceAPI(params)
  // console.log('根据知识点获取题目：', res)
  if (Array.isArray(res.results) && res.results.length > 0) {
    for (let i = 0; i < res.results.length; i++) {
      res.results[i].image_src = baseURL_noapi + res.results[i].image_src
    }
    resource_list.value.push(...res.results)
    state.page += 1
    state.total = res.total
  } else {
    uni.showToast({ icon: 'error', title: '触底添加数据失败' })
  }
}

// 自定义触底加载更多数据
onReachBottom(async () => {
  console.log('触底拉')
  if (resource_list.value.length >= state.total) {
    uni.showToast({ title: '没有更多数据了！', icon: 'none' })
    return 0
  } else {
    addRescourceData()
  }
})
// 获取指定的学科、年级、类型的资源
const getResource = async () => {
  let params = {
    publish: state.publish,
    subject: state.subject,
    grade: state.grade,
    type_cn: state.type_cn,
    page: state.page,
    size: state.size,
  }
  console.log('参数：', params)
  const res = await getResourceAPI(params)
  resource_list.value = res.results
  state.total = res.total
  for (let i = 0; i < resource_list.value.length; i++) {
    resource_list.value[i].image_src = baseURL_noapi + resource_list.value[i].image_src
  }
  console.log('资源：', res)
}
// 出版社
const getPublishOption = async () => {
  const res = await getPublishAPI()
  dropdownListOption.value = res.results
  console.log('出版社：', dropdownListOption.value)
}
const changePublish = (value: string) => {
  console.log('出版社改变了', value)
  state.page = 1
  state.publish = value
  getResource()
}
// 查看详情，即跳转到页面3
const onClickDetail = (res: ResourceItem) => {
  console.log('查看详情：', res)
  uni.navigateTo({
    url: `/pages/category/third?id=${res.id}&grade=${res.grade}&charge_type=${res.charge_type}&name=${res.name}&image_src=${res.image_src}&date=${res.date}`,
  })
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="two_item">
        <button size="mini">时间</button>
        <uni-icons type="arrow-down" size="20"></uni-icons>
      </view>
      <!-- <view class="two_item">
        <button size="mini">销量</button>
        <uni-icons type="arrow-down" size="20"></uni-icons>
      </view> -->
      <view class="form-container">
        <uni-data-select
          v-model="state.publish"
          :localdata="dropdownListOption"
          @change="changePublish"
          placement="top"
          placeholder="出版社"
        ></uni-data-select>
      </view>
    </view>
    <view class="body">
      <view
        class="body_item"
        v-for="(item, index) in resource_list"
        :key="index"
        @click="onClickDetail(item)"
      >
        <view
          class="left"
          :style="{
            width: '150rpx',
            height: '200rpx',
            backgroundImage: `url(${item.image_src})`,
            backgroundSize: 'cover',
          }"
        >
          <!-- <image
            style="width: 200rpx; background-color: #eeeeee"
            mode="aspectFit"
            :src="item.image_src"
          /> -->
        </view>
        <view class="right">
          <text text_name>{{ item.name }}</text>
          <view class="two_text">
            <text class="text_charge">{{ item.charge_type }}</text>
            <text class="text_time">{{ shortTime(item.date) }}</text>
          </view>
          <view class="two_text">
            <text class="text_publish">{{ item.publish }}</text>
            <text class="text_download">下载：{{ item.download_total }}</text>
          </view>
          <view class="base-line"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.base-line {
  width: 100%; /* 横线宽度，可改为固定值如 300rpx */
  height: 1px; /* 横线粗细 */
  background-color: #eee; /* 横线颜色 */
  margin: 20rpx 0; /* 上下间距 */
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.two_item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.body {
  display: flex;
  flex-direction: column;
  margin: 4rpx;
  .body_item {
    display: flex;
    flex-direction: row;
    margin: 3rpx 3rpx 0rpx 3rpx;
    font-size: small;
    justify-content: flex-start;
    align-items: flex-end;
  }
}
.left {
  width: 30%;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 68%;
}
.two_text {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}
.text_time {
  color: rgb(235, 134, 11);
}
.text_charge {
  color: rgb(1, 25, 92);
}
.text_publish {
  color: rgb(15, 54, 6);
}
.text_download {
  color: rgb(65, 57, 57);
}
.text_name {
  font-weight: bolder;
}
</style>
